<template>
  <div style="font-size: 40px">
    <el-row>
      <el-col :span="24">
        <el-table stripe highlight-current-row
                  ref="wlTable"
                  v-if="initDataUrl && labelList && dataList"
                  style="width: 100%"
                  :data="dataList"
                  :height="720"
                  :row-key="(row)=>{return row.id}"
                  class="wl-table"
                  header-row-class-name="wl-table-header"
                  row-class-name="wl-table-row"
                  @row-click="rowClick"
        >
          <el-table-column type="selection" prop="id"/>
          <el-table-column v-for="(label, index) in labelList" :key="index" :label="label.fieldLabel"
                           :prop="label.fieldName"/>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="toModify(scope)">修改</el-button>
              <el-button type="danger" size="small" @click="toDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col></el-col>
      <el-col :span="9" :offset="15">
        <el-row class="wl-page-button-group" :gutter="10">
          <el-button size="small" class="el-col"><i class="el-icon-arrow-left"></i>上一页</el-button>
          <el-button size="mini"
                     v-for="i of pageable.totalPages"
                     v-if="i < 4"
                     :key="i"
                     :class="['el-col', 'wl-page-button-number', {'wl-current-page' : pageable.pageNumber === (i - 1)}]"
          >{{i}}</el-button>
          <span style="color: white; font-size: 12px">...</span>
          <el-button size="mini" :class="['el-col', 'wl-page-button-number', {'wl-current-page' : pageable.pageNumber === (i - 1)}]">{{pageable.totalPages}}</el-button>
          <el-button size="small" class="el-col">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: 'WLTable',
    data() {
      return {
        pageable: {},
        dataList: [],
      }
    },
    watch: {},
    props: {
      labelList: {
        type: Array,
      },
      initDataUrl: {
        type: String,
        default: '',
      },
      deleteURL: {
        type: String,
        default: ''
      }
    },
    mounted() {
      if (this.initDataUrl && this.labelList) {
        this.initTable();
      } else {
        this.$message('无法获取到数据源')
      }
    },
    methods: {
      initTable() {
        this.$request.post(this.initDataUrl, {
          pageNo: 1,
          pageSize: 20
        }).then(res => {
          this.dataList = res.content
          this.pageable = res.pageable
          this.pageable['totalPages'] = res.totalPages
        })
      },
      rowClick(row) {
        this.$refs.wlTable.toggleRowSelection(row)
      },
      toModify(scope) {
        console.log(scope)
      },
      toDelete(scope) {
        this.$confirm('确认删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$request.post(this.deleteURL + '/' + scope.row.id).then((res) => {
            this.initTable();
            this.$notify(res.message, {
              type: 'success',
              duration: 3000,
              position: 'bottom-right'
            })
          })
        }).catch(e => {
          this.$notify(e.message, {
            type: 'error',
            duration: 3000,
            position: 'bottom-right'
          })
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .wl-table {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: none;
  }

  .wl-table-header > th {
    background-color: rgba(60, 115, 130, 0.3);
    color: #777;
    text-align: center;
  }

  .wl-table > .el-table__body-wrapper::-webkit-scrollbar {
    width: 15px;
  }

  .wl-table > .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(rgba(31, 42, 64, 1) 15%, rgb(63, 85, 130) 70%, rgb(100, 136, 206));
  }

  .wl-table > .el-table__body-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #EDEDED;
  }

  .wl-table > .el-table__body-wrapper {
    border-bottom: none;
  }

  .wl-table .el-table__body {
    width: auto !important;
  }

  .wl-table-row:hover {
    background-color: rgb(220, 242, 247) !important;
  }

  .wl-table-row {
    color: black;
    height: 80px !important;
  }

  .wl-table-row[class*='el-table__row--striped'] > td {
    background-color: rgb(197, 219, 224) !important;
  }

  .wl-table-row[class*='el-table__row--striped']:hover {
    background-color: #fff !important;
  }

  .wl-table-row > td {
    background-color: rgb(220, 242, 247);
    text-align: center;
  }

  .wl-page-button-group > .el-button {
    border: none;
    color: white;
    background-color: rgba(0, 0, 0, 0);
  }

  .wl-page-button-group > .el-button:hover {
    border: 1px solid #1f2a40;
  }

  .wl-current-page {
    border: 1px solid #bbcff7 !important;
    background-color: #4770bf !important;
    color: floralwhite !important;
  }

  .wl-page-button-number {
    /*margin: 0 5px !important;*/
    border-radius: 100% !important;
    text-align: center;
  }
</style>
